<template>
  <div>
    <nav-box></nav-box>
    <div class="yj">
      <img src="../../assets/images/aboutus/landscape-sea-horizon_2560x1600_sc.jpg" alt="">
      <div>
        <span class="bigtitle"></span>
        <span class="title">提供深度的行业解决方案</span>
      </div>
    </div>
    <div class="banner">
      <div class="introduction">
        <div class="in-left">
          <img src="../../assets/images/aboutus/bb.jpg" alt="">
        </div>
        <div class="in-right">
          <span>公司简介</span>
          <p>彼帮智能成立于2014年,核心成员皆是来自西电、成电的博士、硕士,技术起点高、持续研发能力强、工程实践经验丰富。 </p>
          <p>彼帮智能成立于2014年,核心成员皆是来自西电、成电的博士、硕士,技术起点高、持续研发能力强、工程实践经验丰富。
            彼帮智能成立于2014年,核心成员皆是来自西电、成电的博士、硕士,技术起点高、持续研发能力强、工程实践经验丰富
            彼帮智能成立于2014年,核心成员皆是来自西电、成电的博士、硕士,技术起点高、持续研发能力强、工程实践经验丰富
            彼帮智能成立于2014年,核心成员皆是来自西电、成电的博士、硕士,技术起点高、持续研发能力强、工程实践经验丰富
          </p>
        </div>
      </div>

      <!--<div class="course">-->
      <!--<div class="c-left">-->
      <!--<div>-->
      <!--<img src="../../assets/images/aboutus/l1.jpg" alt="">-->
      <!--<div>-->
      <!--<span class="sj">2015-08</span>-->
      <!--<span class="jj">公司获得天使轮投资200万元</span>-->
      <!--</div>-->
      <!--</div>-->
      <!--<div style="padding: 80px 0px;">-->
      <!--<img src="../../assets/images/aboutus/l2.jpg" alt="">-->
      <!--<div>-->
      <!--<span class="sj">2016-12</span>-->
      <!--<span class="jj">"润物云"及润物终端系统上线</span>-->
      <!--</div>-->
      <!--</div><div>-->
      <!--<img src="../../assets/images/aboutus/l3.jpg" alt="">-->
      <!--<div>-->
      <!--<span class="sj">2018-06</span>-->
      <!--<span class="jj">"仙女座"多机协同控制平台投入使用</span>-->
      <!--</div>-->
      <!--</div>-->

      <!--</div>-->
      <!--<img src="../../assets/images/aboutus/st.jpg" alt="">-->
      <!--<div class="c-right">-->
      <!--<div>-->
      <!--<div>-->
      <!--<span class="sj">2014-04</span>-->
      <!--<span class="jj">深圳彼帮智能软件科技有限公司成立</span>-->
      <!--</div>-->
      <!--<img src="../../assets/images/aboutus/r1.jpg" alt="">-->
      <!--</div>-->
      <!--<div style="padding: 83px 0;">-->
      <!--<div>-->
      <!--<span class="sj">2016-06</span>-->
      <!--<span class="jj">"猎户座I" 飞行控制器诞生</span>-->
      <!--</div>-->
      <!--<img src="../../assets/images/aboutus/r2.jpg" alt="">-->
      <!--</div>-->
      <!--<div>-->
      <!--<div>-->
      <!--<span class="sj">2017-10</span>-->
      <!--<span class="jj">"猎户座II" 农业全驾智能飞控系统上线</span>-->
      <!--</div>-->
      <!--<img src="../../assets/images/aboutus/r3.jpg" alt="">-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <div class="contanctus">
        <img class="bg" src="../../assets/images/aboutus/address.jpg" alt="">
        <!--<img class="dw" src="../../assets/images/aboutus/dw.jpg" alt="">-->
        <div class="tips">
          <span></span>
          <span></span>
          <span>联系我们</span>
          <span></span>
          <span></span>
        </div>
        <div class="commitBox">
          <input type="text" class="name" placeholder="您的姓名">
          <input type="text" class="email" placeholder="您的邮箱">
          <textarea maxlength="200" v-model="textVal" placeholder="您有什么问题，可以给我们留言"></textarea>
          <button class="commit">提交</button>
        </div>
      </div>

    </div>
    <footer-box></footer-box>
    <back-to-top></back-to-top>
  </div>
</template>

<script>
  import navBox from '../common/nav'
  import footerBox from '../common/footer'
  import BackToTop from "../common/backToTop";

  export default {
    name: "aboutus",
    components: {
      BackToTop,
      navBox,
      footerBox
    },
    mounted() {
      document.documentElement.scrollTop = 0;
    }
  }
</script>

<style lang="scss">
  .yj {
    width: 100%;
    height: 720px;
    position: relative;
    margin-top: 60px;
    > img {
      width: 100%;
      height: 100%;
    }
    > div {
      width: 100%;
      position: absolute;
      top: 33%;
      .bigtitle {
        font-size: 60px;
        color: #ffffff;
        font-weight: 500;
        display: block;
        text-align: center;
      }
      .title {
        font-size: 36px;
        color: #ffffff;
        display: block;
        text-align: center;
      }
    }
  }

  textarea {
    height: 100px;
    width: 564px;
    padding: 10px;
    overflow-y: hidden;
    margin-top: 20px;
    background: #33a9e6;
    border: 1px solid #3cade5;
    border-radius: 4px;
    color: #ffffff;
  }

  input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #ffffff;
    /* placeholder字体大小  */
    font-size: 16px;
  }

  textarea::-webkit-input-placeholder {
    color: #ffffff;
    font-size: 16px;
  }

  .banner {
    width: 100%;
    height: 100%;
    padding: 60px 0 0px;
    background: #f2f2f2;
    .introduction {
      background: white;
      width: 1200px;
      height: 460px;
      display: flex;
      margin: 0 auto;
      .in-left {
        width: 460px;
        height: 460px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .in-right {
        width: 620px;
        height: 300px;
        padding: 80px 60px;
        > span {
          font-size: 28px;
          color: #333333;
          font-weight: 600;
          display: block;
          margin-bottom: 30px;
        }
        > p {
          line-height: 30px;
          font-size: 16px;
          color: #666666;
          text-indent: 35px;
        }
      }
    }

    .course {
      width: 960px;
      padding: 80px 120px 40px;
      display: flex;
      margin: 0 auto;
      background: white;
      .c-left {
        height: 100%;
        margin-top: 162px;
        > div {
          width: 450px;
          display: flex;
          justify-content: space-between;
          > div {
            .sj {
              font-size: 24px;
              color: #333333;
              display: block;
              margin: 20px 0 10px 0;
              text-align: right;
            }
            .jj {
              font-size: 16px;
              color: #666666;
              display: block;
              text-align: right;
            }
          }
        }
      }
      .c-right {
        height: 100%;
        margin-top: 63px;
        > div {
          width: 450px;
          display: flex;
          justify-content: space-between;
          > div {
            .sj {
              font-size: 24px;
              color: #333333;
              display: block;
              margin: 20px 0 10px 0;
              text-align: left;
            }
            .jj {
              font-size: 16px;
              color: #666666;
              display: block;
              text-align: left;
            }
          }
          .cc {
            padding: 80px 0px;
          }
        }
      }
    }
    .contanctus {
      position: relative;
      width: 100%;
      .bg {
        width: 100%;
      }

      .tips {
        position: absolute;
        left: 50%;
        top: 0;
        width: 1200px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 80px auto 100px;
        margin-left: -600px;
        :nth-child(1) {
          width: 490px;
          height: 1px;
          background: #ffffff;
        }
        :nth-child(2) {
          width: 6px;
          height: 6px;
          -webkit-transform-origin: 0 100%;
          -moz-transform-origin: 0 100%;
          -o-transform-origin: 0 100%;
          -ms-transform-origin: 0 100%;
          transform-origin: 0 100%;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
          background: #ffffff;
        }
        :nth-child(5) {
          width: 490px;
          height: 1px;
          background: #ffffff;
        }
        :nth-child(3) {
          font-size: 28px;
          color: #ffffff;
        }
        :nth-child(4) {
          width: 6px;
          height: 6px;
          -webkit-transform-origin: 0 100%;
          -moz-transform-origin: 0 100%;
          -o-transform-origin: 0 100%;
          -ms-transform-origin: 0 100%;
          transform-origin: 0 100%;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
          background: #ffffff;
        }
      }
      .commitBox {
        position: absolute;
        top: 31%;
        left: 50%;
        margin-left: -600px;
        width: 600px;
        height: 300px;
        .name {
          width: 260px;
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          color: white;
          background: #33a9e6;
          display: inline-block;
          border: 1px solid #33a9e6;
          border-radius: 4px;
          padding-left: 20px;
        }
        .email {
          padding-left: 20px;
          width: 280px;
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          color: white;
          background: #33a9e6;
          display: inline-block;
          border: 1px solid #33a9e6;
          border-radius: 4px;
        }
        .commit {
          display: block;
          width: 150px;
          height: 40px;
          background: white;
          border-radius: 4px;
          border: none;
          font-size: 16px;
          color: #0095df;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
          margin-top: 40px;
        }
      }
    }
  }
</style>
